<template>
    <h1>{{ msg }}</h1>
    <div>{{ count }}</div>
    <button @click="count++">+</button>
</template>

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

// 组件的生命周期

onBeforeMount(() => {
    // 无法获取到DOM
    console.log('创建之前====>')
})

onMounted(() => {
    // 可以获取DOM
    console.log('创建完毕====>')
})

onBeforeUpdate(() => {
    console.log('更新之前====>')
})

onUpdated(() => {
    console.log('更新完毕====>')
})

onBeforeUnmount(() => {
    console.log('卸载之前====>')
})

onUnmounted(() => {
    console.log('卸载之后====>')
})

</script>

<style scoped>
a {
    color: #42b983;
}

label {
    margin: 0 .5em;
    font-weight: bold;
}

code {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 4px;
    color: #304455;
}
</style>
